<template>
  <div class="contrastBox">
    <!-- <table class="table" style="border-collapse: collapse;">
        <tr>
          <th>学生</th>
          <th>教师</th>
        </tr>
        <tr>
          <td>学生的检查所见</td>
          <td>教师批改的检查所见</td>
        </tr>
        <tr>
          <td colspan="2" >
            <div class="td" style="width:1300px">
              <code-diff :old-string="jcSjTxt" :new-string="checkSee" output-format="side-by-side"/>
            </div>
          </td>
        </tr>

        <tr>
          <td>学生的检查意见</td>
          <td>教师批改的检查意见</td>
        </tr>
        <tr>
            <td colspan="2">
               <div class="td" style="width:1300px"><code-diff :old-string="jcYjTxt" :new-string="checkOpinion" output-format="side-by-side"/></div>
            </td>
        </tr>

        <tr>
          <td>学生的检查技术</td>
          <td>教师的检查技术</td>
        </tr>
        <tr>
           <td colspan="2">
              <div class="td" style="width:1300px"><code-diff :old-string="jcReadyTxt" :new-string="checkReady" output-format="side-by-side"/></div>
           </td>
        </tr>

        <tr>
          <td>病史</td>
          <td>教师的检查准备</td>
        </tr>        
        <tr>
           <td colspan="2">
              <div class="td" style="width:1300px"><code-diff :old-string="jcProReadyTxt" :new-string="checkProRdady" output-format="side-by-side"/></div>
           </td>
        </tr>

         <tr>
          <td style="text-align:right">分数：<span style="margin-right:40px; font-size:18px">100</span></td>
          <td></td>
        </tr>        

      </table> -->

    <template>
      <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
        <el-tab-pane label="对比" name="first">
          <div class="patient-content">
            <div class="patient-contentbox">
              <div class="student-content">
                <div class="student-title">学生报告</div>
                <div class="bingshi">
                  <div class="content">
                    <el-tabs type="card">
                      <el-tab-pane label="简要病史" class="jianyao" disabled name="0">
                        <el-input
                          type="textarea"
                          :rows="12"
                          placeholder="请输入内容"
                          v-model="report.jcProReadyTxt"></el-input>
                      </el-tab-pane>
                      <el-tab-pane label="检查准备" name="1">
                        <el-input
                          type="textarea"
                          :rows="12"
                          placeholder="请输入内容"
                          v-model="report.jcProReadyTxt"></el-input>
                      </el-tab-pane>
                      <el-tab-pane label="检查技术" name="2">
                        <el-input
                          type="textarea"
                          :rows="12"
                          placeholder="请输入内容"
                          v-model="report.jcReadyTxt"></el-input>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
                <div class="suojian">
                  <div class="title">检查所见</div>
                  <div class="content">
                    <el-input type="textarea" :rows="12" placeholder="请输入内容" v-model="report.jcSjTxt"></el-input>
                  </div>
                </div>
                <div class="yijian">
                  <div class="title">检查意见</div>
                  <div class="content">
                    <el-input type="textarea" :rows="12" placeholder="请输入内容" v-model="report.jcYjTxt"></el-input>
                  </div>
                </div>
              </div>
              <div class="teacher-content">
                <div class="teacher-title">教师批改</div>
                <div class="bingshi">
                  <div class="content">
                    <el-tabs type="card">
                      <el-tab-pane label="简要病史" class="jianyao" disabled name="0">
                        <el-input
                          type="textarea"
                          :rows="12"
                          placeholder="请输入内容"
                          v-model="teacherReport.jcProReadyTxt"></el-input>
                      </el-tab-pane>
                      <el-tab-pane label="检查准备" name="1">
                        <el-input
                          type="textarea"
                          :rows="12"
                          placeholder="请输入内容"
                          v-model="teacherReport.jcProReadyTxt"></el-input>
                      </el-tab-pane>
                      <el-tab-pane label="检查技术" name="2">
                        <el-input
                          type="textarea"
                          :rows="12"
                          placeholder="请输入内容"
                          v-model="teacherReport.jcReadyTxt"></el-input>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
                <div class="suojian">
                  <div class="title">检查所见</div>
                  <div class="content">
                    <el-input
                      type="textarea"
                      :rows="12"
                      placeholder="请输入内容"
                      v-model="teacherReport.jcSjTxt"></el-input>
                  </div>
                </div>
                <div class="yijian">
                  <div class="title">检查意见</div>
                  <div class="content">
                    <el-input
                      type="textarea"
                      :rows="12"
                      placeholder="请输入内容"
                      v-model="teacherReport.jcYjTxt"></el-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 检查所见 -->
        <el-tab-pane label="对比检查所见" name="second">
          <table class="table" style="border-collapse: collapse">
            <tr>
              <td style="padding-left: 20px">学生检查所见</td>
              <td style="padding-left: 20px">教师批改的检查所见</td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="td" style="width: 1300px">
                  <code-diff
                    :old-string="studentReportInfoData.jcsYTxt"
                    :new-string="studentReportInfoData.checkSee"
                    output-format="side-by-side" />
                </div>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <!-- 检查意见 -->
        <el-tab-pane label="对比检查意见" name="third">
          <table class="table" style="border-collapse: collapse">
            <tr>
              <td style="padding-left: 20px">学生的检查意见</td>
              <td style="padding-left: 20px">教师批改的检查意见</td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="td" style="width: 1300px">
                  <code-diff
                    :old-string="studentReportInfoData.jcYjTxt"
                    :new-string="studentReportInfoData.checkOpinion"
                    output-format="side-by-side" />
                </div>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <!-- 检查意见 -->
        <el-tab-pane label="对比检查技术" name="fourth">
          <table class="table" style="border-collapse: collapse">
            <tr>
              <td style="padding-left: 20px">学生的检查技术</td>
              <td style="padding-left: 20px">教师的检查技术</td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="td" style="width: 1300px">
                  <code-diff
                    :old-string="studentReportInfoData.jcReadyTxt"
                    :new-string="studentReportInfoData.checkReady"
                    output-format="side-by-side" />
                </div>
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <!-- 病史 -->
        <el-tab-pane label="病史" name="fifth">
          <table class="table" style="border-collapse: collapse">
            <tr>
              <td style="padding-left: 20px">病史</td>
              <td style="padding-left: 20px">教师的检查准备</td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="td" style="width: 1300px">
                  <code-diff
                    :old-string="studentReportInfoData.jcProReadyTxt"
                    :new-string="studentReportInfoData.checkProRdady"
                    output-format="side-by-side" />
                </div>
              </td>
            </tr>
          </table>
        </el-tab-pane>

        <!-- 分数 -->
        <el-tab-pane label="学生报告及分数" name="score">
          <div class="scoreContent" v-for="(item, index) in studenData" :key="index">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ item.title }}</span>
              </div>
              <div class="content">
                {{ item.content }}
              </div>
            </el-card>
          </div>
          <div class="score clf">
            <div class="score2">分数:100</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="返回" name="sixth"></el-tab-pane>
      </el-tabs>

      <el-button type="primary" @click="$router.go(-1)" style="margin: 20px 0px; float: right">返回</el-button>
    </template>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import { CodeDiff } from 'v-code-diff'
export default {
  name: 'App',
  components: {
    CodeDiff,
  },
  data() {
    return {
      activeName: 'first',
      studentReportInfoData: {
        jcProReadyTxt: '',
        checkProRdady: '',
        jcReadyTxt: '',
        checkReady: '',
        jcYjTxt: '',
        checkOpinion: '',
        jcsYTxt: '',
        checkSee: '',
      }, //获取老师学生报告信息,
      loading: true, //动画,
      score: null,
      report: {
        jcReadyTxt: '',
        jcSjTxt: '',
        jcYjTxt: '',
        jcProReadyTxt: '',
      },
      teacherReport: {
        jcReadyTxt: '',
        jcSjTxt: '',
        jcYjTxt: '',
        jcProReadyTxt: '',
      },
      // 分数及学生检查
      studenData: [],
    }
  },
  mounted() {
    this.loading = Loading.service({
      lock: true,
      text: '加载中...',
      background: 'rgba(0,0,0,0.7)',
    })
    let { reportId } = this.$route.query
    this.getStudentReportInfoData(reportId)
  },
  methods: {
    handleClick(tab, event) {
      if (tab.index === '6') {
        this.$router.push('/report')
        return
      }
    },
    // 获取老师和学生报告数据
    async getStudentReportInfoData(reportId) {
      // let data = await getCompareData(reportId)
      // console.log(data, 'data')
      // this.studentReportInfoData = data.data
      this.loading.close()
      // // this.score = score;
      // // // 分数及学生报告
      // let studenTitle = ['检查所见', '检查意见', '检查技术', '病史']
      // let { jcsYTxt, jcYjTxt, jcReadyTxt, jcProReadyTxt } = this.studentReportInfoData
      // let studenContent = [jcsYTxt, jcYjTxt, jcReadyTxt, jcProReadyTxt]
      // let newArr = []
      // studenTitle.forEach((item, index) => {
      //   let obj = {}
      //   obj.title = item
      //   obj.content = studenContent[index]
      //   newArr.push(obj)
      // })
      // // console.log(newArr, 'newArr')
      // // this.studenData = newArr
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__header {
  border-radius: 15px 15px 0 0;
}
::v-deep .el-tab-pane {
  height: 100%;
}
::v-deep .el-tabs__nav .is-disabled {
  color: black;
  font-weight: bold;
  font-size: 18px;
}
::v-deep .el-tabs__nav-scroll {
  padding: 0 20px;
}
// ::v-deep .el-tabs__nav {
//   padding: 10px 20px;
// }
::v-deep #tab-first {
  font-size: 18px;
  font-weight: 550;
  color: #000;
}
::v-deep #tab-sixth {
  font-size: 18px;
  font-weight: 550;
  color: #000;
}

$border: 1px solid #ececec;
.patient-content {
  height: 100vh;
  border: 1px solid #ececec;
  background: #ffffff;
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  .patient-contentbox {
    display: flex;
    width: 100%;
    margin: 0 auto;
    // box-shadow: 4px 4px 25px 2px rgba(156, 152, 152, 0.308);
    // overflow-y: auto;
    .student-content {
      margin-right: 20px;
      flex: 1;
    }
    .teacher-content {
      flex: 1;
    }
  }
  .student-title {
    height: 40px;
    background: #000058;
    color: white;
    font-size: 20px;
    line-height: 40px;
    padding-left: 20px;
  }
  .teacher-title {
    height: 40px;
    background: #000058;
    color: white;
    font-size: 20px;
    line-height: 40px;
    padding-left: 20px;
  }

  .btn {
    margin-left: 180px;
    height: 102px;
    line-height: 72px;
  }
}
.bingshi {
  border: $border;
  height: 14%;

  .title {
    width: 130px;
    height: 100%;
    line-height: 260px;
    text-align: center;
    border: $border;
    background-color: #fafafc;
  }
  .content {
    line-height: 30px;
    width: 100%;
    height: 155px;
    box-sizing: border-box;
    border-radius: 15px;
    background: #ffffff;
  }
}
.bingshi ::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .bingshi .el-tabs__content {
  height: 60%;
}
::v-deep .el-textarea {
  height: 100%;
}
.bingshi ::v-deep .el-tabs {
  height: 100%;
  overflow: hidden;
}
.suojian {
  border: $border;
  margin-top: 20px;
  height: 40%;
  .title {
    background-color: #e5f5ff;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    font-weight: bold;
    font-size: 18px;
    border-bottom: $border;
  }
  .content {
    line-height: 30px;
    width: 100%;
    height: 90%;
    box-sizing: border-box;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  :deep(textarea) {
    border: none;
  }
}

.yijian {
  border: $border;
  margin-top: 20px;
  .title {
    background-color: #e5f5ff;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    font-weight: bold;
    font-size: 18px;
    border-bottom: $border;
  }
  :deep(textarea) {
    border: none;
  }
}

::v-deep .el-tabs {
  height: 100%;
  width: 100%;
}
//右边

::v-deep .el-tabs__nav-scroll {
  background-color: #e5f5ff;
}
::v-deep .el-textarea__inner {
  height: 100%;
  resize: none;
  -webkit-box-shadow: 7px 7px 15px #bebebe;
  box-shadow: 7px 7px 15px #bebebe;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 15px;
  background: #ffffff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}

.contrastBox {
  width: 1600px;
  height: 100vh;
  overflow-y: scroll;
  margin: 0 auto;
  .table {
    width: 1400px;
    margin: 0 auto;
    th,
    td {
      width: 650px;
      padding: 10px 0px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    td:nth-child(2n-1),
    th:nth-child(2n-1) {
      border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}

.tabs {
  width: 100%;
  margin: 30px auto 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
//分数
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 480px;
}
.score {
  width: 100%;
  span {
    float: right;
  }
}
::v-deep .el-card.box-card.is-always-shadow {
  width: 100%;
}
// 插件样式
::v-deep .hljs-attribute,
::v-deep .hljs-number,
::v-deep .d2h-wrapper .hljs {
  font-size: 14px !important;
}
::v-deep .d2h-file-side-diff {
  overflow: hidden;
  margin: 0px;
}

::v-deep .d2h-info .d2h-code-side-line,
::v-deep .d2h-code-line-prefix {
  display: none;
}

.td ::v-deep tr:nth-of-type(1) {
  display: none;
}

::v-deep .d2h-del,
::v-deep .d2h-ins,
::v-deep .d2h-file-wrapper,
::v-deep .d2h-code-side-linenumber {
  border: none;
}

::v-deep .d2h-diff-table {
  font-size: 14px;
}

::v-deep .d2h-diff-table td {
  height: 30px;
  line-height: 30px;
  color: #606266;
}

::v-deep .d2h-diff-table {
  font-size: 16px;
}

::v-deep .d2h-code-side-linenumber,
::v-deep .d2h-ins d2h-change {
  font-size: 0;
}
::v-deep .d2h-code-side-line {
  padding: 0;
}

::v-deep .d2h-code-side-line {
  padding: 0 10px;
}

::v-deep .d2h-code-line-ctn.hljs {
  word-break: normal;
  width: auto;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}
.clf::after {
  content: '';
  display: block;
  clear: both;
}

.scoreContent {
  margin-top: 20px;
}

.score {
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .score2 {
    font-size: 20px;
    float: right;
    padding: 20px 0;
    margin-right: 100px;
  }
}
.scoreContent {
  .content {
    line-height: 30px;
  }
}
</style>
